<template>
  <div class="qtHeader">
    <el-row>
      <el-col :span="12">
        <div>
            <!-- <slot v-if="$slots.default"></slot> -->
            <h1 class="qtTitle">{{ fatherTitle }}</h1>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="qtButton">
          <router-link to class="qtCreateAsset" @click.native="qtTips" v-show="showbtn">{{fatherCreate}}</router-link>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  props: ['fatherTitle', 'fatherCreate'],
  data () {
    return {
      dialogFormVisible: true,
      showbtn: true
    }
  },
  created () {
    this.showButton()
  },
  methods: {
    qtTips () {
      this.$emit('tell', this.dialogFormVisible)
    },
    showButton () {
      // console.log(location.pathname)
      if (location.pathname.slice(1) === 'Dashboard' || location.pathname.slice(1) === 'Report') {
        this.showbtn = false
      } else {
        this.showbtn = true
      }
    }
  }

}
</script>

<style lang="scss" scoped>
.qtHeader {
  margin-bottom: 10px;
  // position: fixed;
  .el-row {
    &:last-child {
      margin-bottom: 0;
    }
  }
  .qtTitle {
    font-size: 25px;
    text-align: left;
    line-height: 1;
  }
  .qtButton {
    margin-top: 5px;
    text-align: right;
    padding-right: 20px;
    .qtCreateAsset {
      background-color: #3c8dbc;
      padding: 5px 10px;
      color: #fff;
      border-radius: 5px;
    }
  }
}
</style>
